<template>
  <div class="sys-notfi">
    <ul>
      <li v-for="(item) in messageList" :key="item.msgId">
        <div class="type-icon" style="  color: #52c41a;" v-if="item.msgType==3"><CheckCircleOutlined /></div>
        <div class="type-icon" style="  color: #fa8c16;" v-if="item.msgType==2"><InfoCircleOutlined /></div>
        <div class="type-icon" style="  color: #f50;" v-if="item.msgType==1"><CloseCircleOutlined /></div>
        <div class="msg-context">
          <h1>{{item.msgTitle}} <span>{{item.sendTime}}</span></h1>
          <div><p>{{item.msgContext}}</p></div>
        </div>
        <div class="operation">
          <a-button type="primary" @click="showModal(item)">查看</a-button>
        </div>
      </li>
    </ul>
    <a-modal v-model:visible="visible" :title="messageItem.msgTitle" width="50%">
      <template #footer>
        <a-button key="submit" type="primary" @click="visible = false">
          关闭
        </a-button>
      </template>
      <p>{{messageItem.msgContext}}</p>
    </a-modal>
  </div>
</template>
<script>
import { CheckCircleOutlined ,InfoCircleOutlined,CloseCircleOutlined} from "@ant-design/icons-vue";
export default {
  components: {
    CheckCircleOutlined,
    InfoCircleOutlined,
    CloseCircleOutlined
  },
  data() {
    return {
      visible: false, //是否显示 对话框
      messageList: [],
      messageItem:{}
    };
  },
mounted(){
    this.getData()
},
  methods: {
    getData() {
      this.$axios.get("/admin/message/all").then((res) => {
        if (res.data.code == 2000) {
          this.messageList=res.data.data
        } else {
          message.error("删除失败");
        }
      });
    },
    showModal(item) {
      this.visible = true;
      this.messageItem=item

    },
    closeModal() {
      this.visible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.sys-notfi ul li {
  display: flex;
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  align-items: center;
}
.sys-notfi ul li .type-icon {
  font-size: 28px;

  font-weight: 800;
  margin-right: 20px;
  flex: 0.5;
  text-align: center;
}
.sys-notfi ul li .msg-context {
  flex: 10;
}
.sys-notfi ul li .msg-context h1 {
  font-size: 20px;
}
.sys-notfi ul li .msg-context h1 span {
  font-size: 12px;
  margin-left: 20px;
}
.sys-notfi ul li .operation {
  flex: 1;
}
</style>